<template>
  <a-timeline>
    <a-timeline-item v-for="(node, index) in childNodes" :key="index" :color="colorText(node)">
      <!-- 分支节点 -->
      <div class="line-content-flex" v-if="node.type == 'route'">
        <div>{{ node.name }}</div>
        <div class="node-people-num-text" @click="getNestNode(node)">
          {{ node.parallelismNodes.length + "条" }} <span class="arrow-icon">></span>
        </div>
      </div>
      <div class="line-content-flex" v-else>
        <div>{{ node.name }}</div>
        <!-- 多人 -->
        <!-- //  1: 有效 2： 同意 3. 不同意 4： 退回 5：自动同意 6：自动通过 -->
        <div class="line-content-right" v-if="getApprovalList(node).length > 1">
          <!-- 不在当前审批节点范围 -->
          <div class="line-content-right many-people-underline" v-if="!curNodeIDs.includes(node.nodeId)">
            <!-- 显示会签或签 -->
            {{ `${getApprovalList(node).length}人${getActType(node)}` }}
          </div>
          <!-- 多人 会签， 要判断每一个人的审批状态 -->
          <eg-popover overlayClassName="time-line-simple" v-else>
            <template slot="popoverContent">
              <div style="margin-bottom: 24px;">
                {{ `${node.name}(${getApprovalList(node).length}人${getActType(node)})` }}
              </div>
              <EgTimelineInner :flowNode="node" :sourceName="'todo'" :curNodeIDs="curNodeIDs" />
            </template>
            <div class="line-content-right many-people-underline" slot="main">
              <!-- 显示会签或签 -->
              {{ `${getApprovalList(node).length}人${getActType(node)}` }}
            </div>
          </eg-popover>
        </div>
        <!-- 单人 -->
        <template v-if="getApprovalList(node).length == 1">
          <eg-popover v-if="getApprovalList(node)[0].status !== '1'" overlayClassName="time-line-simple">
            <template slot="popoverContent">
              <div class="popover-left-name">
                审批状态 <span class="popover-right-text">{{ getstatus(node) }}</span>
              </div>
              <div class="popover-left-name">
                审批意见 <span class="popover-right-text">{{ getApprovalList(node)[0].handleOpinion }}</span>
              </div>
              <div class="popover-left-name">
                审批时间 <span class="popover-right-text">{{ getApprovalList(node)[0].handleTime }}</span>
              </div>
            </template>
            <div class="line-content-right" slot="main">
              {{ getApprovalList(node)[0].RY_JBXX__NAME }}
            </div>
          </eg-popover>
          <div v-else class="line-content-right">
            {{ getApprovalList(node)[0].RY_JBXX__NAME }}
          </div>
        </template>
      </div>
    </a-timeline-item>
  </a-timeline>
</template>
<script>
import EgTimelineInner from "./EgTimelineInner.vue";
/**
 * @module ParallelTimeLine
 * @author 何志强
 * @description 流程平行分支节点
 */
export default {
  name: "ParallelTimeLine",
  components: { EgTimelineInner },
  data() {
    return {
      childNodes: []
    };
  },
  /**
   * Props 接受父组件的传值 重要参数
   * @prop {Object} line 流程节点数据源
   */
  props: {
    parallelNode: {
      type: Object
    },
    source: {
      type: String,
      default: "applicate"
    },
    curNodeIDs: {
      type: Array
    }
  },
  watch: {
    parallelNode: {
      deep: true,
      immediate: true,
      handler(va) {
        if (va) {
          this.childNodes = [];
          this.getListArr(va);
        }
      }
    }
  },
  computed: {},
  mounted() {},
  methods: {
    //  <!-- //  1: 有效 2： 同意 3. 不同意 4： 退回 5：自动同意 6：自动通过 -->
    // 节点圆圈的 颜色, 根据 status 是否等于 1 未审批， 或者2 审批通过， 当前节点， 会签是否全部完成等判断审批节点颜色
    // #EAA83E 当前审批节点 黄色
    // "#1890ff" 默认节点颜色 蓝色
    // #5CC190 审批通过颜色 绿色
    colorText(node) {
      let approvals = this.getApprovalList(node);
      if (node.type == "route" && approvals.length == 0) {
        let colorArr = [];
        let filteredArr = [];
        node.parallelismNodes.forEach(item => {
          colorArr.push(this.handlerApprovals(item.childNode, this.getApprovalList(item.childNode)));
        });
        filteredArr = [...new Set(colorArr)];
        return filteredArr.length == 1 ? filteredArr[0] : "#EAA83E";
      } else {
        return this.handlerApprovals(node, approvals);
      }
    },
    handlerApprovals(node, approvals) {
      if (approvals && approvals.length == 1) {
        if (approvals[0].status == 1) {
          if (this.curNodeIDs.includes(node.nodeId)) return "#EAA83E";
          else return "#1890ff";
        } else if (approvals[0].status == 2) return "#5CC190";
        else return "#1890ff";
      } else if (approvals.length > 1) {
        if (this.getActType(node) == "会签") {
          let arr = approvals.map(item => item.status);
          // 存在未审批
          if (arr.includes("1")) {
            if (this.curNodeIDs.includes(node.nodeId)) return "#EAA83E";
            else return "#1890ff";
          } else {
            let narr = [...new Set(arr)];
            if (narr[0] == "2" && narr.length == 1) return "#5CC190";
            else return "#1890ff";
          }
        } else {
          // 或签
          if (this.curNodeIDs.includes(node.nodeId)) return "#EAA83E";
          else return "#1890ff";
        }
      }
      return "#1890ff";
    },
    // 判断会签是否全部通过
    checkAnd(node) {
      let approvals = this.getApprovalList(node);
      if (this.getActType(node) == "会签") {
        let arr = approvals.map(item => item.status);
        // 存在未审批
        if (arr.includes("1")) {
          return false;
        } else {
          // 有过审批， 可以是拒绝 通过等
          return true;
        }
      }
    },
    // 自身后面的面包屑 清除
    breadcrumbItemClick(bread) {
      console.log(bread);
    },
    getRuleType(line) {
      if (line.properties && line.properties.actionerRules) return line.properties.actionerRules[0].type;
      else return "";
    },
    getApprovalList(line) {
      if (line.properties && line.properties.actionerRules) return line.properties.actionerRules[0].approvals;
      else return [];
    },
    getAutoPass(line, text) {
      if (line.type == "approver") {
        line.approvalList.length == 0 && line.noneActionerAction == "admin";
        let approveList = line.properties.actionerRules[0].approvals.length;
        if (approveList == 0 && line.noneActionerAction == text) return true;
        else return false;
      } else return false;
    },
    getActType(line) {
      let act = line.properties.actionerRules[0].actType;
      if (act == "or") return "或签";
      else return "会签";
    },
    getAppproveOriNode(line) {
      if (line.type == "approver") {
        let ruleT = line.properties.actionerRules[0].type;
        if (ruleT == "target_originator") {
          return true;
        } else return false;
      } else return false;
    },
    getApproveNode(line) {
      if (line.type == "approver") {
        let ruleT = line.properties.actionerRules[0].type;
        if (ruleT == "target_post" || ruleT == "target_pos" || ruleT == "target_charge") {
          return true;
        } else return false;
      } else return false;
    },
    getListArr(flow) {
      this.childNodes.push({
        nextId: flow.nextId,
        name: flow.name,
        type: flow.type,
        nodeId: flow.nodeId,
        prevId: flow.prevId,
        properties: flow.properties,
        parallelismNodes: flow.parallelismNodes
      });
      if (flow.childNode) {
        this.getListArr(flow.childNode);
      }
    },
    getNestNode(routeNode) {
      this.$emit("route-node", routeNode);
    },
    selectPerson(approveNode) {
      if (this.source == "todo") return false;
      this.$emit("select-person", approveNode, approvals => {
        approveNode.properties.actionerRules[0].approvals = approvals;
      });
    },
    getstatus(line) {
      let item = this.getApprovalList(line)[0];
      //  1: 有效 2： 同意 3. 不同意 4： 退回 5：自动同意 6：自动通过
      return item.status == "1" && line.nodeId == this.nodeId
        ? "审批中"
        : item.status == "2" && item.type != "0"
        ? "已同意"
        : item.status == "3"
        ? "不同意"
        : item.status == "4"
        ? "退回"
        : item.status == "5"
        ? "自动同意"
        : item.status == "6"
        ? "自动通过"
        : item.status == "7"
        ? "转审批"
        : "";
    }
  }
};
</script>

<style lang="scss">
.time-line-simple {
  min-width: 240px;
  .popover-left-name {
    color: #191919;
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 8px;
  }
  .popover-right-text {
    display: inline-block;
    width: 207px;
    margin-left: 24px;
    color: #4c4c4c;
  }
}
.line-content-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  line-height: 24px;
  .line-content-right {
    cursor: pointer;
    &:hover {
      color: #3f8fff;
    }
  }
  .select-people-tips {
    color: #eaa83e;
  }
  .node-people-num-text {
    font-size: 12px;
    color: #3f8fff;
    line-height: 20px;
    cursor: pointer;
    .arrow-icon {
      color: #7f7f7f;
    }
  }
}
</style>

